<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>$refs实验一</title>
</head>
<body style="background: salmon">
      <div id="ref-outside" >
          <outside-fater ></outside-fater>
          <!--<p>ref的外边组件</p>-->
      </div>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  // var refout={
  //   template:"<div class='childComp' @click='consoleRef'><h5 ref='outside'>我是子组件</h5></div>",
  //   methods:{
  //     consoleRef:function () {
  //       console.log(this)
  //       console.log(this.$refs.outside )
  //     }
  //   }
  // }
  // var refou=new Vue({
  //   el:"#ref-outside",
  //   components:{
  //     "outside-fater":refout
  //   }
  // })
  Vue.component("outside-fater",{
      template:"<div class='childComp' @click='consoleRef'><h5 ref='outside'>我是子组件</h5></div>",
    methods:{
          consoleRef:function () {
            console.log(this.$vnode.elm.getElementsByTagName("h5")[0].innerHTML)
            console.log(this.$refs.outside)
          }
        }
  })
  var refou= new Vue({
    el:"#ref-outside"
  })

</script>
